<template>
  <el-container>
    <!--头部-->
    <el-header>
      <Head></Head>
    </el-header>

    <!--主体-->
    <el-main>
      <div style="padding-left: 250px">
        <h2>官方主题</h2>
        <el-row>
          <el-col :span="8">
            <el-card :body-style="{ padding: '10px' }" shadow="hover" style="height: 263px; width: 362px">
              <img src="../../assets/00.png" class="image">
              <div style="padding: 14px;">
                <span style="font-size: 16px;color: #303133;font-weight:bold">Element</span>
                <span style="float: right;font-weight: 400;font-size: 14px;color: #909399;">by Element</span>
              </div>
              <span style="padding: 14px;">默认主题</span>
            </el-card>
          </el-col>
        </el-row>
        <el-main></el-main>

        <h2>我的主题</h2>

        <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            style="height: 263px; width: 365px"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"/>

          <i v-else class="el-icon-plus avatar-uploader-icon">点击上传</i>

        </el-upload>
      </div>

    </el-main>

    <!--底部区域-->
    <el-footer style="height: 200px;">
      <Foot></Foot>
    </el-footer>

  </el-container>


</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 360px;
  height: 200px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

h2 {
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #1f2f3d;
  margin: 30px 0;
}
</style>